<template>
  <div class="test-scroing">
    <AppHeader :title="headerTitle" @leftClickEvent="handleHeaderLeft()" style="background: rgb(0, 0, 0, 0)">
      <template #left>
        <img src="@/assets/images/icon-arrow-left-white.png" height="20" />
      </template>
    </AppHeader>
    <div class="content">
      <div class="scroing-box">
        <div class="scroing">0.6</div>
        <div class="scroing-rate">得分率40%</div>
        <div class="scroing-PK">
          <p>
            <span><span class="green">6</span>/6</span>
            <span class="desc">班级最高分</span>
          </p>
          <p>
            <span><span>3.18</span>/6</span>
            <span class="desc">班级平均分</span>
          </p>
          <p>
            <span class="green">42</span>
            <span class="desc">完成人数</span>
          </p>
        </div>
      </div>
      <div style="padding: 0 10px">
        <div style="padding: 0 10px; background-color: #fff; border-radius: 15px">
          <div class="test-answer-info">

          </div>
        </div>
      </div>
    </div>
  </div>
  <AppLoading v-if="loading.page" />
</template>
<script setup>
import { onMounted, reactive, toRefs, nextTick, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

import AppHeader from "@/components/AppHeader.vue";
import AppLoading from "@/components/AppLoading.vue";
import { showFailToast, Button as VanButton } from "vant";

const route = useRoute();
const router = useRouter();
const { title: subTitle, id: testId } = route.query;
const state = reactive({
  loading: {
    page: false,
  },
  testList: [],
});

const headerTitle = computed(() => {
  return `订正错题 ${subTitle}`;
});
onMounted(() => {
  state.loading.page = true;
  getTestScore();
});

const getTestScore = () => {
  state.loading.page = false;
};
// const goToCorrection = (item) => {
//   const { id, moreInfo } = item;
//   router.push({
//     path: "/wrongBook/correction",
//     query: { id, title: moreInfo.name },
//   });
// };
const handleHeaderLeft = () => {
  router.go(-1);
};
// const goToBack = () => {
//   router.replace({
//     path: "/wrongBook/testList",
//   });
// };

const { loading } = toRefs(state);
</script>
<style scoped lang="scss">
.test-scroing {
  font-family: PingFangSC, PingFang SC;
  background: #f5f5f5;
  height: 100%;

  :deep(.app-header) {
    .center__txt {
      color: #fff;
    }
  }

  .content {
    font-family: PingFangSC, PingFang SC;
    box-sizing: border-box;
  }

  .scroing-box {
    padding: 44px 10px 0;
    background: linear-gradient(18deg, #29f19c 0%, #02a1f9 100%);
    display: flex;
    flex-direction: column;

    &>div {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
    }

    .scroing {
      font-size: 66px;
      padding: 30px 0 5px;
    }

    .scroing-rate {
      padding-bottom: 33px;
    }

    .scroing-PK {
      font-size: 24px;
      color: #8E8E8E;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 15px 15px 0px 0px;
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-around;

      p {
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .desc {
        font-size: 12px;
        margin-top: 15px;
      }

      .green {
        color: #009855;
      }
    }
  }

  .test-answer-info {
    color: #333;
    width: 100%;
    font-size: 16px;

    div {
      padding: 16px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;
      box-sizing: border-box;
    }

    .icon-arrow-right-gray {
      width: 7px;
      height: 14px;
    }

    .btn {
      padding: 10px;
      box-sizing: border-box;
      width: 100%;

      .van-button {
        height: 45px;
        width: 100%;
        border-radius: 20px;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
}
</style>
